z<template>
	<!-- 启动页面 -->
	<view class="content">
		<view class="content-wrap">
			<!-- 职业回显 -->
			<view class="career">欢迎回来 ^ǒ^</view>
			<!-- 头像区域 -->
			<view class="header">
				<image src="../../static/image/tini/avator.png" mode="scaleToFill"></image>
				<block v-for="(item, index ) in showkeyword " :key="index">
					<view :class=" ['bubble', 'com'+index] ">{{item}}</view>
				</block>
			</view>

			<view class="footer">
				<navigator url="/pages/my/my" open-type="switchTab" class="btn" hover-class="bb">点击进入</navigator>
			</view>

			<!-- 点击按钮进入页面的区域 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				showkeyword:[]
			}
		},
		onShow() {
			// 获取code
			uni.login({
				provider: 'weixin',
				success: async loginRes=>{
					console.log(222,loginRes);
					this.$api('user',{type:'openid',code:loginRes.code}).then(res=>{
						console.log('参数openid',res)
						if(res.result.status === 'S'){
							// uni.reLaunch({
							// 	url:'/pages/index/index'
							// })
							uni.setStorageSync('openid',res.result.data.data[0].openid)
							if(!res.result.data.data[0].data.isLogin){
								uni.reLaunch({
									url:'/pages/login/login'
								})
							}
							return 
						}else{
							uni.setStorageSync('openid',res.result.data.openid)
						}
						
						this.$store.dispatch('requestProject');
					}).catch(msg=>{
						console.log('系统错误',msg)
					})
					
				}
			});
		},
		mounted() {
			
			// setTimeout(()=>{
			// 	this.$store.dispatch('requestProject');
			// },500)
		},
		computed: {
			initList(){
				const showkeyword = this.$store.state.showkeyword;
				if(showkeyword.length > 6){
					return showkeyword.slice(0,6);
				}
				// if(showkeyword.length == 0){
				// 	uni.navigateTo({
				// 		url:'/pages/resume/resume'
				// 	})
				// 	return
				// }
				return showkeyword.length>2 && showkeyword
			}
		},
		watch:{
			initList(val){
				console.log('箭头======',val)
				this.showkeyword = val;
				
			}
		}
		
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		
	}

	@keyframes bubbleAnim {
		0% {
			transform: scale(0.8);
		}

		50% {
			transform: scale(1);
		}

		100% {
			transform: scale(0.8);
		}
	}

	.content {
		width: 100%;
		height: 100%;
		overflow: hidden;
		// border: 1px solid red;
		// background: url('../../static/image/bg.png') no-repeat;
		background: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-18e0568c-1945-4f1a-a02e-45e0ca958307/dc474e44-3f8a-42c6-9947-ed46efed3fd9.png') no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: flex-end;
		flex-direction: column;

		.content-wrap {
			width: 100%;
			height: 100%;
			margin-top: 228rpx;

			.career {
				color: #fff;
				margin: 0rpx auto 60rpx;
				text-align: center;
				font-size: 48rpx;
			}

			.header {
				text-align: center;
				position: relative;

				&>image {
					width: 240rpx;
					height: 240rpx;
					border-radius: 50%;
					margin-top: 120rpx;
				}

				.bubble {
					position: absolute;
					width: 100rpx;
					height: 100rpx;
					text-align: center;
					line-height: 100rpx;
					border-radius: 50%;
					// border: 1rpx solid #ccc;
					color: #fff;
					font-size: 24rpx;
					box-shadow: 0 0 14rpx #fff inset;
					animation: bubbleAnim 2.5s ease-in infinite;
				}

				.com0 {
					top: 0;
					left: 228rpx;
				}

				.com1 {
					top: 0;
					right: 228rpx;
				}

				.com2 {
					top: 200rpx;
					left: 120rpx;
				}

				.com3 {
					top: 200rpx;
					right: 120rpx;
				}

				.com4 {
					top: 386rpx;
					left: 228rpx;
					// margin-left: -44rpx;
				}

				.com5 {
					top: 386rpx;
					right: 228rpx;
					// margin-left: -44rpx;
				}

			}

			.footer {
				width: 310rpx;
				height: 72rpx;
				line-height: 72rpx;
				border-radius: 40rpx;
				margin: 180rpx auto 0;
				text-align: center;
				font-size: 36rpx;
				background-color: rgb(90,150,255);
				color: #ffffff;

				.btn {
					// width: 100%;
					// height: 100%;
				}

				// .bb {
				// 	background: transparent;
				// }
			}
		}
	}
</style>
